<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水果店作业</title>
</head>
<body>
    <div id="app"> 
        
    <h3>水果商店</h3>
    <table border="2" width="600" height="100">
        <p>苹果 10元一斤  /  现价8折 </p>
        <tbody>
<tr>
    <td>
        <span>请输入你要购买的斤数</span>
        <input type="number" placeholder="请输入购买斤数" v-model.number="goodCatty">
    </td>
</tr>
<tr>
    <td>
      <button @click="payMoney">结账买单</button>
    </td>
  </tr>
        </tbody>
    </table>
    <p>总计： 原价：{{totalPrice}}元，现价：{{totalPrice*0.8}}元，已优惠：{{totalPrice*0.2}}元</p>
    </div>
</body>
</html>
<script src="http://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script>
<script>
    new Vue({
        el:'#app',
        data:{
            goodCatty:0,
            totalPrice:0
        },
        methods:{
            payMoney(){
                this.totalPrice=parseInt(this.goodCatty.toFixed(2)*100)/10
            }
        }
    })
</script>